<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border:1px solid #000;
            margin-top: 200px;
        }
        .bg{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="bg">
    <canvas width="500" height="400" id="canvas" style="">
        您的浏览器不支持canvas，请更新！
    </canvas>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    //创建图片对象
    var p3=new Image();
    //下载图片
    p3.src="img/p3.png";
    //为图片对象绑定onload事件
    p3.onload=function () {
        //绘制图片
        ctx.drawImage(p3,0,0);
        ctx.drawImage(p3,350,0);
        ctx.drawImage(p3,0,295);
        ctx.drawImage(p3,350,295);
        ctx.drawImage(p3,150,150,200,100);
    }
</script>
</html>